<template>
    <div class="dashboard-top" :class="isHome?'push-index':''">
        <div class="top-logo">
            <div class="logo"></div>
            <div class="title">VRCity</div>
        </div>
        <div class="top-setting">
            <div class="item" title="Time setting" @click="changeItem">
                {{time}}
            </div>
            <div class="item" title="Time setting" @click="changeItem">
                {{date}}
            </div>
            <div class="item" title="Time setting" @click="changeItem">
                <i class="weather"></i>
                <span>{{temperature}}</span>
                <span>C</span>
            </div>
            <div class="item" title="Time setting" @click="changeItem">
                <span>PM2.5</span>{{PMcount}}
            </div>
            <!-- <div class="item" title="System setting">
        <i class="icon el-icon-s-tools"></i>
      </div> -->
        </div>
        <!-- 面板遮罩层 -->
        <div class="top-weather" v-if="showItem">
            <div class="weather">
            </div>
        </div>
        <!-- 面板内容 -->
        <div class="top-item" v-if="showItem">
            <div class="item">
                <div :class="item.class" v-for="item in timeArray" @click="timeClick(item)">
                    <i :class="item.weather"></i>
                    <span>{{item.time}}</span>
                </div>
            </div>
            <div class="item-line"></div>
            <div class="item">
                <div class="item-title">REAL WEATHER SYNC</div>
                <div :class="item.class" v-for="item in weatherArray" @click="weatherClick(item)">
                    <i :class="item.weather"></i>
                    <span>{{item.time}}</span>
                </div>
            </div>
            <div class="item-line1"></div>
        </div>
        <!-- 设置 -->
        <div class="top-setting-show" v-if="false">
            <div class="content">

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'top',
        props: [''],
        data() {
            return {
                time: '',
                date: this.moment(new Date()).add('year', 0).format("YYYY/MM/DD"),
                PMcount: 15,
                temperature: 25,
                weatherName: "bg-icon-weather-sunny-actived",
                iconArrowStyle: 'bg-icon-arrow-down',
                switchNow: false,
                switchWidth: 60,
                sliderDefaut: 0,
                max: 24,
                timer: 0,
                showItem: false,
                timeArray: [{
                        weather: 'item-icon weather-icon-morning',
                        time: '7:00',
                        checked: false,
                        class: 'item-content'
                    },
                    {
                        weather: 'item-icon weather-icon-sunny',
                        time: '12:00',
                        checked: false,
                        class: 'item-content'
                    },
                    {
                        weather: 'item-icon weather-icon-afternoon',
                        time: '17:00',
                        checked: false,
                        class: 'item-content'
                    }
                ],
                weatherArray: [{
                        weather: 'item-icon weather-icon-sunny',
                        time: 'SUNNY',
                        env_weather: 'Sunny',
                        checked: false,
                        class: 'item-content'
                    },
                    {
                        weather: 'item-icon weather-icon-cloudy',
                        time: 'CLOUDY',
                        env_weather: 'Cloudy',
                        checked: false,
                        class: 'item-content'
                    },
                    {
                        weather: 'item-icon weather-icon-rain',
                        time: 'RAIN',
                        env_weather: 'LightRain',
                        checked: false,
                        class: 'item-content'
                    }
                ]
            };
        },

        components: {},

        computed: {
            isHome() {
                return this.$store.state.app.isHome;
            }
        },

        beforeMount() {},
        created() {
            this.getInfo()
            this.timer = setInterval(() => {
                this.time = this.moment(new Date()).format('LTS');
            }, 1000);
        },
        beforeDestory() {
            clearInterval(this.timer)
        },
        methods: {
            //获取当地的天气信息和PM值
            getInfo() {

            },
            //显示/隐藏 面板
            changeItem() {
                this.showItem = !this.showItem
            },
            //时间切换
            timeClick(item) {
                //console.log(window.cloudRender, 11);
                window.cloudRender && window.cloudRender.SuperAPI("SetEnvTime", {
                    "env_time": item.time
                });
                let arr = this.timeArray
                if (!item.checked) {
                    for (let i = 0; i < arr.length; i++) {
                        if (arr[i].time === item.time) {
                            arr[i].class = 'item-content-checked';
                            arr[i].checked = true;
                        } else {
                            arr[i].class = 'item-content';
                            arr[i].checked = false;
                        }
                    }
                } else {
                    for (let i = 0; i < arr.length; i++) {
                        if (arr[i].time === item.time) {
                            arr[i].class = 'item-content';
                            arr[i].checked = false;
                        }
                    }
                }
            },
            //天气切换
            weatherClick(item) {
                window.cloudRender && window.cloudRender.SuperAPI("SetEnvWeather", {
                    "env_weather": item.env_weather
                });
                let arr = this.weatherArray
                if (!item.checked) {
                    for (let i = 0; i < arr.length; i++) {
                        if (arr[i].time === item.time) {
                            arr[i].class = 'item-content-checked';
                            arr[i].checked = true;
                        } else {
                            arr[i].class = 'item-content';
                            arr[i].checked = false;
                        }
                    }
                } else {
                    for (let i = 0; i < arr.length; i++) {
                        if (arr[i].time === item.time) {
                            arr[i].class = 'item-content';
                            arr[i].checked = false;
                        }
                    }
                }
            }
        },

        watch: {}

    }
</script>
<style lang='' scoped>

</style>